<template>
	<view class="search">
		<view class="cover"></view>

		<!-- #ifdef MP-WEIXIN -->
		<head-nav :showMenu='true' title='搜索' bgc="white"></head-nav>
		<!-- #endif -->

		<view class="topSearch">
			<view class="searchBox">
				<text class="iconfont icon-fangdajing"></text>
				<input placeholder="搜索歌曲" auto-focus v-model="userIpnut" @confirm="startSearch()" @input="inputing()" />
				<text class="iconfont icon-guanbi1" v-show='userIpnut' @tap="clearIput()"></text>
			</view>
		</view>
		<view style="height: 90rpx;"></view>

		<scroll-view scroll-y="true" :style="{height: 'calc(100vh - 90rpx - '+ bottom*1.2+'px)'}" v-if="userIpnut  && rs.length"
		 @scrolltolower="toBottom()" lower-threshold="50">
			<view class="rsBox">
				<view class="each" v-for="(n,i) in rs" :key="i" @tap='toDetail(n.id)'>
					<view class="left">
						<view class="up">
							<rich-text :nodes="parse(n.name)"></rich-text>
						</view>
						<view class="down">
							<image src="../../static/vip.png" mode="aspectFit"></image>
							<rich-text :nodes="parse2(n)"></rich-text>
						</view>
					</view>
					<view class="right">
						<text class="iconfont icon-bofang1"></text>
					</view>
				</view>
			</view>
		</scroll-view>


		<view v-if="userIpnut && !rs.length" class="tipBox">
			<view class="tip">搜索“{{userIpnut}}”</view>
			<view class="each" v-for="(n,i) in suggest" :key="i" @tap="suggestTap(n.keyword)">
				<text class="iconfont icon-fangdajing"></text>
				<text class="text"> {{n.keyword}}</text>
			</view>
		</view>

		<view v-if="!userIpnut">
			<view class="historyBox" v-if="histroyList.length">
				<view class="top">
					<text>历史记录{{userIpnut}}</text>
					<text class="iconfont icon-lajitong" style="font-size: 44rpx;color: #808080;" @tap="clearHis()"></text>
				</view>
				<view class="items">
					<text class="item" @tap="tapHis(n)" v-for="(n,i) in histroyList" :key="i">{{n}}</text>
				</view>
			</view>
			<view class="hots">
				<view class="tit">热搜榜</view>
				<view class="each" v-for="(n,i) in hotlist" :key='i' @tap="suggestTap(n.searchWord)">
					<view class="left" :class="{red:i<3?true:false}">{{i+1}}</view>
					<view class="mid">
						<view class="up">
							<text>{{n.searchWord}}</text>
							<!-- :class="{zt:n.iconType<3?true:false,f:n.iconType==5?true:false}" -->
							<image :src="n.iconUrl" v-if="n.iconUrl" mode="aspectFit"></image>
						</view>
						<view class="down">
							<text>{{n.content}}</text>
						</view>
					</view>
					<view class="right">
						<text>{{n.score}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- <end-safe v-if="!userIpnut  && !rs.length"></end-safe> -->
	</view>
</template>

<script>
	import {
		searchHot,
		inputRS,
		searchTip
	} from '../../common/api.js'
	import headNav from '../../components/headNav/headNav.vue'
	export default {
		data() {
			return {
				hotlist: [],
				userIpnut: '',
				histroyList: [],
				suggest: [],
				rs: [],
				bottom: '',
				page: 1
			};
		},
		components: {
			headNav
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			this.bottom = uni.getMenuButtonBoundingClientRect().bottom
			// #endif

			// #ifdef H5
			this.bottom = 25
			// #endif

			searchHot().then(res => {
				console.log(res)
				this.hotlist = res.data.data
			})
			if (uni.getStorageSync("histroyList")) {
				this.histroyList = uni.getStorageSync("histroyList")
			} else {
				this.histroyList = []
			}
		},
		methods: {
			toBottom() {
				this.page++
				inputRS(this.userIpnut, this.page).then(res => {
					if (res.data.result && res.data.result.songs) {
						this.rs = [...this.rs, ...res.data.result.songs]
					}
				})
			},
			toDetail(e) {
				uni.navigateTo({
					url: '../detail/detail?id=' + e
				})
			},
			clearIput() {
				this.userIpnut = ''
				this.rs = []
			},
			parse(e) {
				var reg = new RegExp(this.userIpnut, 'gi');
				let rs = e.replace(reg, '<span class="Reg-color">' + this.userIpnut + '</span>')
				return '<span class="Reg-box">' + rs + '</span>'
			},
			parse2(n) {
				let arr = n.artists
				let str = ""
				for (var i = 0; i < arr.length; i++) {
					var reg = new RegExp(this.userIpnut, 'g');
					let rs = arr[i].name.replace(reg, '<span class="Reg-color">' + this.userIpnut + '</span>')
					let xg = i == arr.length - 1 ? "" : " / "
					let last = i == arr.length - 1 && n.album.name ? ' - ' + n.album.name.replace(reg, '<span class="Reg-color">' +
						this.userIpnut + '</span>') : ''
					str += (rs + xg + last)
				}
				return '<span class="Reg-box regsm">' + str + '</span>'
			},
			tapHis(e) {
				setTimeout(() => {
					this.userIpnut = e
					this.startSearch()
				}, 50) //之所以这样是因为输入框的blur和历史记录的tap产生了冲突
			},
			startSearch() {
				if (this.userIpnut) {
					//异步写最前面
					inputRS(this.userIpnut).then(res => {
						if (res.data.result) {
							console.log(res.data.result.songs)
							this.rs = res.data.result.songs
						} else {
							this.rs = []
						}
					})
					this.histroyList.unshift(this.userIpnut)
					this.histroyList = [...new Set(this.histroyList)]
					if (this.histroyList.length > 10) {
						this.histroyList.length = 10
					}
					uni.setStorageSync('histroyList', this.histroyList);
				}
			},
			clearHis() {
				this.$nextTick(() => {
					this.histroyList = []
					uni.setStorageSync('histroyList', this.histroyList);
				}) //输入框的blur和历史记录的tap产生了冲突,需缓和dom				
			},
			inputing() {
				if (this.userIpnut) {
					searchTip(this.userIpnut).then(res => {
						if (res.data.result) {
							this.suggest = res.data.result.allMatch
							console.log(this.suggest)
						} else {
							this.suggest = []
						}
					})
				}
			},
			suggestTap(e) {
				this.userIpnut = e
				this.startSearch()
			}
		},
		watch: {
			userIpnut(n) {
				if (!n) {
					this.rs = []
				}
			}
		}
	}
</script>

<style lang="scss">
	/*  富文本样式  使用/deep/兼容h5  */
	/deep/ .regsm {
		font-size: 26rpx !important;
	}

	/deep/.Reg-box {
		display: block;
		font-size: 30rpx;
		width: 500rpx;
		@include textEl()
	}

	/deep/.Reg-color {
		color: rgba($color: #0275e1, $alpha: 0.7);
	}

	.search {
		.cover {
			width: 100vw;
			height: 100vh;
			background: white;
			position: fixed;
			z-index: -1;
		}

		.rsBox {
			width: 90%;
			margin: 30rpx auto;

			.each {
				height: 100rpx;
				margin: 40rpx auto;
				border-bottom: 1px solid rgba($color: #9f9f9f, $alpha: 0.8);
				display: flex;

				.left {
					width: 90%;
					height: 100%;
					display: flex;
					flex-direction: column;
					position: relative;

					.up {
						height: 50%;
					}

					.down {
						display: flex;
						align-items: center;

						image {
							width: 40rpx;
							height: 20rpx;
							margin-right: 10rpx;
						}

						height: 50%;
						color: rgba($color: #878787, $alpha: 0.7);
					}
				}

				.right {

					text {
						font-size: 50rpx;
					}

					color: rgba($color: #9f9f9f, $alpha: 0.8);
					text-align: center;
					width: 10%;
					height: 100%;
				}
			}
		}

		.topSearch {
			z-index: 1;
			/*
			脱离文档流的元素们
			
			如果不进行方向设置就会自动排列(按照常规div流)
			*/
			position: fixed;
			width: 100%;
			height: 90rpx;
			background: white;
			display: flex;
			padding-top: 10rpx;

			.searchBox {
				width: 90%;
				height: 70rpx;
				margin: auto;
				background: #f7f7f7;
				border-radius: 30rpx;
				display: flex;
				align-items: center;

				.iconfont {
					font-size: 26rpx;
					margin: 0 28rpx;
				}

				input {
					font-size: 28rpx;
					flex: 1;
				}

			}
		}

		.tipBox {
			.tip {
				width: 85%;
				margin: 20rpx auto;
				font-size: 30rpx;
				color: rgba($color: #0275e1, $alpha: 0.7);
			}

			.each {
				color: rgba($color: #919191, $alpha: 0.8);
				width: 85%;
				margin: 20rpx auto;
				display: flex;
				align-items: center;

				text {
					font-size: 40rpx;
					color: rgba($color: #919191, $alpha: 0.9);
					margin-right: 40rpx;
				}

				.text {
					display: block;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					width: 90%;
					font-size: 32rpx;
				}

			}
		}



	}

	.historyBox {
		width: 90%;
		margin: 30rpx auto;

		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 80rpx;

			text {
				font-size: 28rpx;
			}
		}

		.items {
			display: flex;
			flex-flow: wrap;

			.item {
				display: block;
				margin: 10rpx;
				background: #f7f7f7;
				border-radius: 25rpx;
				padding: 15rpx 25rpx;
				font-size: 26rpx;
			}
		}
	}

	.hots {
		width: 95%;
		margin: 0 auto;

		.tit {
			font-size: 34rpx;
			margin: 25rpx 0;
			font-weight: bold;
		}

		.each {
			margin: 50rpx auto;
			width: 100%;
			height: 80rpx;
			display: flex;

			.left {
				text-align: center;
				width: 32rpx;
				font-size: 35rpx;
				color: lightgray;
				margin-right: 25rpx;
				line-height: 80rpx;
			}

			.red {
				color: rgba(255, 0, 0, .9);
			}

			.mid {
				width: 70%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.up {
					position: relative;
					font-size: 32rpx;
					display: flex;
					align-items: center;

					text {
						display: block;
						max-width: 80%;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					image {
						width: 50rpx;
						height: 25rpx;
						margin: 10rpx;
					}

				}

				.down {
					display: flex;
					align-items: center;

					image {
						width: 50rpx;
						height: 25rpx;
						margin-right: 10rpx;
					}

					font-size: 23rpx;
					color: rgba($color: #c2c2c2, $alpha: 1);

					text {
						display: block;
						width: 90%;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}

			.right {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				text {
					font-size: 24rpx;
					font-weight: 100;
					color: rgba($color: #c2c2c2, $alpha: 0.7);
				}
			}

		}
	}
</style>
